<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#F1F1F1" :fullscreen="true">
		<view class="page-message animate__animated animate__fadeIn">
			<cl-sticky>
				<Header tit="NOTIFICATION" :title="t('message.title')"></Header>
				<cl-tabs
					v-model="active"
					:list="tabs[cache.lang]"
					:height="88"
					gutter="24"
				></cl-tabs>
			</cl-sticky>
			<view class="list">
				<view class="li flex align-center" v-for="(item, index) in list" :key="index">
					<image class="img" v-if="item.img" :src="item.img" mode="aspectFill"></image>
					<view class="flex1 info">
						<view class="title">{{ item.title[cache.lang] }}</view>
						<view class="text overflow2">{{ item.text[cache.lang] }}</view>
						<view class="date">{{ item.date }}</view>
					</view>
				</view>
				<cl-loadmore
					background-color="#f1f1f1"
					:loading="false"
					:finish="true"
					:text="$t('loadmore.text')"
					:loading-text="$t('loadmore.loadingText')"
					:finish-text="$t('loadmore.finishText')"
				></cl-loadmore>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import Header from "/@/components/header.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const app = useApp();
const ui = useUi();
const active = ref<number>(0);
const tabs = ref<any>({
	zh: [
		{
			value: 0,
			label: "全部通知",
		},
		{
			value: 1,
			label: "违章缴费",
		},
		{
			value: 2,
			label: "交通播报",
		},
		{
			value: 3,
			label: "系统通知",
		},
	],
	en: [
		{
			value: 0,
			label: "Full notice",
		},
		{
			value: 1,
			label: "Illegal payment",
		},
		{
			value: 2,
			label: "Traffic bulletin",
		},
		{
			value: 3,
			label: "System notification",
		},
	],
});
const list = ref<any[]>([
	{
		title: {
			zh: "系统消息",
			en: "System message",
		},
		text: {
			zh: "轮胎缝里经常会有小石子",
			en: "Tire seams often have small stones",
		},
		date: "2017-04-26 13:00",
		img: "",
	},
	{
		title: {
			zh: "交通播报",
			en: "Traffic bulletin",
		},
		text: {
			zh: "西五环北向南，复兴路、西长安街一线西向东，采取的临时交通管理措施接解除。",
			en: "The temporary traffic control measures taken are lifted",
		},
		date: "2017-04-26 13:00",
		img: "/static/images/zhuiwei.png",
	},
	{
		title: {
			zh: "违章缴费",
			en: "Illegal payment",
		},
		text: {
			zh: "您的车辆[苏EA61N9]于2018-12-14 15:56:46在[驾驶员钱包APP]成功为违章序号为[222]的违章缴纳罚",
			en: "Successfully pay the penalty for the violation number [222]",
		},
		date: "2017-04-26 13:00",
		img: "",
	},
]);
</script>

<style lang="scss" scoped>
.page-message {
	:deep(.cl-tabs__label) {
		span {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #999;
		}
	}
	:deep(.is-active) {
		span {
			color: #0c81f7;
		}
	}
	:deep(.cl-tabs__line) {
		width: 60rpx;
		height: 2rpx;
		background: #0c81f7;
	}
	.list {
		padding: 30rpx;
		box-sizing: border-box;
		.li {
			width: 100%;
			background: #ffffff;
			border-radius: 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			.img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
				margin-right: 30rpx;
			}
			.title {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #a50034;
				line-height: 40rpx;
			}
			.text {
				font-family: PingFangSC;
				font-weight: 600;
				font-size: 38rpx;
				color: #333333;
				line-height: 44rpx;
				margin: 6rpx 0;
			}
			.date {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
				line-height: 50rpx;
			}
			.info {
				width: calc(100% - 240rpx);
			}
		}
	}
}
</style>
